
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
   <SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></SCRIPT>
   <SCRIPT type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></SCRIPT>
   <SCRIPT type="text/javascript">
   function getLocation()
    {
       if(navigator.geolocation) {
           var fallback = setTimeout(function() { fail('10 seconds expired'); }, 10000);
           navigator.geolocation.getCurrentPosition(
               function (pos) {
                   clearTimeout(fallback);
                   console.log('pos', pos);
                   var point = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                   new google.maps.Geocoder().geocode({'latLng': point}, function (res, status) {
                       if(status == google.maps.GeocoderStatus.OK && typeof res[0] !== 'undefined') {
                           var zip = res[0].formatted_address.match(/\d{5}/);
                           if(zip) {
                            address.value=zip;
                            } else fail('Failed to parse');
                       } else {
                           fail('Failed to reverse');
                       }
                   });
               }, function(err) {
                   fail(err.message);
               }
           );
       } else {
           $("._res").html('Geolocation unsupported!');
       }
       function fail(err) {
           console.log('err', err);
           $("._res").html('Error ' + err);
       }
   }
   function showPosition(position)
     {
     x.innerHTML="Zip="+zip;
     }
</SCRIPT>
  </head>
  <body>

    <div>Your Possible Representatives for ZIP Area: {{ zipcode }}</div>
    <ol>{% for res in results %}
      <li><b>{{ res.name }}</b> <a href="{{ res.href }}">contact</a>
      <blockquote>{{ res.image|escape }}</blockquote></li>
    {% endfor %}
    </ol>
    {% if homelessNumber %}
    <p>there are {{homelessNumber}} homeless people in this area.</p>
    {% endif %}

    <div align=center><p> Find Your Representative: </p>
    <button onclick="getLocation()">Get my Location</button> <br>
    <form action="/query" method="post">
      <div><p>or Enter Zip:<input type="text" id=address name="address" rows="3" cols="60"></ipnut></p></div>
      <div><input type="image" src="images/submit.gif" alt="Submit"></div>
    </form>

    <a href="{{ url }}">{{ url_linktext }}</a>
    </div>

  </body>
</html>
